<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<!-- jstl支持 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<style>
</style>


<div class="row" style="margin-top:5px;overflow:scroll;height:650px;">
		<div id="upload" style="display:none">
			<div class="form-group" >
				<label for="exampleInputAccount4" class="col-sm-2">图片文件上传</label>
				<div class="col-sm-9">
					<div id='uploaderPicture' class="uploader">
 						<div class="uploader-message text-center">
    						<div class="content"></div>
    							<button type="button" class="close">×</button>
  							</div>
  						<div class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
  						<div class="uploader-actions">
   							<div class="uploader-status pull-right text-muted"></div>
    						<button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
    						<button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
  						</div>
					</div>
				</div>
			</div>
			
			<div class="form-group">
				<label for="exampleInputAccount4" class="col-sm-2">视频文件上传</label>
				<div class="col-sm-9">
					<div id='uploaderVideo' class="uploader">
 						<div class="uploader-message text-center">
    						<div class="content"></div>
    							<button type="button" class="close">×</button>
  							</div>
  						<div class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
  						<div class="uploader-actions">
   							<div class="uploader-status pull-right text-muted"></div>
    						<button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
    						<button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
  						</div>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="exampleInputAccount4" class="col-sm-2">语音文件上传</label>
				<div class="col-sm-9">
					<div id='uploaderSound' class="uploader">
 						<div class="uploader-message text-center">
    						<div class="content"></div>
    							<button type="button" class="close">×</button>
  							</div>
  						<div class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
  						<div class="uploader-actions">
   							<div class="uploader-status pull-right text-muted"></div>
    						<button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
    						<button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
  						</div>
					</div>
				</div>
			</div>
			
			
		</div>
	<!-- /.row -->
	<!-- PAGE CONTENT ENDS -->
	 
	<!-- 详细信息 -->
	<div >
		<label for="exampleInputAccount4" class="col-sm-2">图片信息</label>
		<div class="col-sm-9" id="showimage" style="height:200px">
		</div>
	</div>
	<div style="height:100px">
		<label for="exampleInputAccount4" class="col-sm-2">视频信息</label>
		<div class="col-sm-9" id="showvideo" >
		</div>
	</div>
	<div style="height:100px;margin-top:10px;">
		<label for="exampleInputAccount4" class="col-sm-2">音频信息</label>
		<div class="col-sm-9" id="showaudio" >
		</div>
	</div>
	
</div>
<div class="items items-hover" style=" background-color: #f5f5f5;margin-top:5px;">
  			<div class="item">    		
  			  	<div class="item-content" style="text-align:center">
  			  		<button style="background-color:#4b5660;border-radius:10px;border-color:#4b5660;opacity:1" class="btn btn-primary btn-update" id="updatemulti"  type="reset" onclick="removemulti()"><i class="icon icon-pencil"></i>修改</button> 	 					
  			  		<button style="background-color:#509783;border-radius:10px;border-color:#509783;opacity:1" class="btn btn-primary btn-success" id="savemulti" type="button" onclick="multi_add()" style="margin-left:10px" disabled><i class="icon icon-check"></i>保存</button> 			
  			  	</div>
  			</div>
</div>  
<script>
function removemulti(){
	$('#upload').css('display','block');
	$('.btn-danger').css('display','block');
	//接触保存按钮锁定状态
	$('#savemulti').removeAttr("disabled");		
	$("#updatemulti").attr("disabled",true);
}


var wetlandid=$('#wetlandParkId').val();

	function delimg(btn){ 
		$.ajax({
			url:'deleteImage',
			type:'post',
			data:{'imgId':btn.parentNode.id,'wetlandParkId':wetlandid},
			success:function(data){
				if(data==true){
					btn.parentNode.remove();
	          		  new $.zui.Messager('恭喜您，删除成功。', {
	        		        icon: 'bell', // 定义消息图标
	       		        	type:'info' 
	        		    }).show();
	          		picturenum--;
				}else{
	          		  new $.zui.Messager('对不起，删除失败。', {
	        		        icon: 'bell', // 定义消息图标
	       		        	type:'danger' 
	        		    }).show();
				}
			}
		});
	}
	function delaudio(btn){ 
		//console.log(btn.parentNode.id);
		btn.parentNode.remove();
		$.ajax({
			url:'deleteAudio',
			type:'post',
			data:{'audioId':btn.parentNode.id,'wetlandParkId':wetlandid},
			success:function(data){
				if(data==true){
					btn.parentNode.remove();
	          		  new $.zui.Messager('恭喜您，删除成功。', {
	        		        icon: 'bell', // 定义消息图标
	       		        	type:'info' 
	        		    }).show();
				}else{
	          		  new $.zui.Messager('对不起，删除失败。', {
	        		        icon: 'bell', // 定义消息图标
	       		        	type:'danger' 
	        		    }).show();
				}
			}
		}); 
	}
	function delvideo(btn){ 
		//console.log(btn.parentNode.id);
		btn.parentNode.remove();
		$.ajax({
			url:'deleteVideo',
			type:'post',
			data:{'videoId':btn.parentNode.id,'wetlandParkId':wetlandid},
			success:function(data){
				if(data==true){
					btn.parentNode.remove();
	          		  new $.zui.Messager('恭喜您，删除成功。', {
	        		        icon: 'bell', // 定义消息图标
	       		        	type:'info' 
	        		    }).show();
				}else{
	          		  new $.zui.Messager('对不起，删除失败。', {
	        		        icon: 'bell', // 定义消息图标
	       		        	type:'danger' 
	        		    }).show();
				}
			}
		});
	}
	
	
	function multi_add(){
		//接触保存按钮锁定状态
		$('#updatemulti').removeAttr("disabled");		
		$("#savemulti").attr("disabled",true);
		
		$('#upload').css('display','none');
		$('.btn-danger').css('display','none');
		
		$('#showimage').empty();
		$('#showvideo').empty();
		$('#showaudio').empty();
		
		if(strValue.wlin_picture.length==0){
			
		}else{
			for(var i=0;i<strValue.wlin_picture.length;i++){
				
				var id=strValue.wlin_picture[i].split('/')[3];
				$('#showimage').append("<div class='col-sm-3' id="+id+">"
						+"<img data-toggle='lightbox' src="+strValue.wlin_picture[i]+" data-image="+strValue.wlin_picture[i]+"  class='img-thumbnail' alt='' width='200'>"
						+"<button type='button' class='btn btn-danger' onclick='delimg(this)' style='display:none'><i class='icon icon-trash bigger-130'></i> 删除</button></div>");
			}
		} 

		if(strValue.wlin_voice.length==0){
			
		}else{
			for(var i=0;i<strValue.wlin_voice.length;i++){
				
				var id=strValue.wlin_voice[i].split('/')[3];
				$('#showaudio').append("<div class='col-sm-3' id="+id+">"
						+"<audio controls='controls'><source src="+strValue.wlin_voice[i]+" type='audio/mp3' width='320' height='240'></audio>"
						+"<button type='button' class='btn btn-danger' onclick='delaudio(this)' style='display:none'><i class='icon icon-trash bigger-130'></i> 删除</button></div>");
			}
		}
		
		if(strValue.wlin_video.length==0){
			
		}else{
			for(var i=0;i<strValue.wlin_video.length;i++){
				
				var id=strValue.wlin_video[i].split('/')[3];
				$('#showvideo').append("<div class='col-sm-3' id="+id+">"
						+"<video src="+strValue.wlin_video[i]+" type='video/mp4' controls width='320' height='240'>Your browser does not support the video tag.</video>"
						+"<button type='button' class='btn btn-danger' onclick='delvideo(this)' style='display:none'><i class='icon icon-trash bigger-130'></i> 删除</button></div>");
			}
		}

	}
	
	
</script>

